<template>
  <!-- <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>-->
  <!-- style="width: 855px;margin:auto;" -->
  <Layout>
    <div class="carousel">
      <Carousel :loop="true" autoplay>
        <CarouselItem>
          <img src="./../../static/image/12.jpg" />
        </CarouselItem>
        <CarouselItem>
          <img src="./../../static/image/13.jpg" />
        </CarouselItem>
        <CarouselItem>
          <img src="./../../static/image/15.jpg" />
        </CarouselItem>
      </Carousel>
    </div>
    <div class="recommend">
      <Row :gutter="10">
        <Col span="12">
          <div class="recommend-item">
            <img src="./../../static/image/16.jpg" />
          </div>
        </Col>
        <Col span="12">
          <div class="recommend-item">
            <img src="./../../static/image/21.jpg" />
          </div>
        </Col>
      </Row>
    </div>
    <div class="news-list">
      <Card style="margin: auto auto  16px auto;">
        <Row :gutter="160">
          <Col span="4">
            <a href="javascript:;">
              <img src="./../../static/image/21.jpg" />
            </a>
          </Col>
          <Col span="20">
            <h3 class="title">
<!--              <a  href="javascript:;">博客的时代正在到来</a>-->
              <router-link :to="{path:'details',params:{ids:'1'},query:{id:2}}">博客的时代正在到来</router-link>
            </h3>
            <div style="text-align: justify;">
              全世界每天传播的媒体内容，有一半是由6大媒体巨头所控制。其利益驱动、意识形态以及传统的审查制度，使得这些经过严重加工处理的内容已经越来越不适应人们的需求。媒体的工业化，内容出
              </div>
            <div class="car-more">  
            <a  href="javascript:;">阅读更多..</a>
            </div>  
          </Col>
        </Row>
      </Card>
      <Card style="margin: auto auto  16px auto;">
        <Row :gutter="160">
          <Col span="4">
            <a href="javascript:;">
              <img src="./../../static/image/21.jpg" />
            </a>
          </Col>
          <Col span="20">
            <h3 class="title">
              <a  href="javascript:;">博客的时代正在到来</a>
            </h3>
            <div style="text-align: justify;">
              全世界每天传播的媒体内容，有一半是由6大媒体巨头所控制。其利益驱动、意识形态以及传统的审查制度，使得这些经过严重加工处理的内容已经越来越不适应人们的需求。媒体的工业化，内容出
              </div>
            <div class="car-more">  
            <a  href="javascript:;">阅读更多..</a>
            </div>  
          </Col>
        </Row>
      </Card>
    </div>
  </Layout>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  components: {
    HelloWorld
  }
};
</script>
<style lang="scss" scoped>
.recommend {
  margin-bottom: 15px;
}
.car-more {
  margin-top: 10px;
  text-align: left;

}
.car-more a{
  padding-right: 50px;
}
.carousel {
  width: 100%;
  margin: auto 660px 12px auto;
}
.recommend-item img {
  width: 100%;
  height: 174.68px;
}

.news-list img {
  width: 140px;
  height: 100px;
  float: left;
}
.news-list .title {
    font-size: 1.4rem;
    color: #333;
    font-weight: normal;
    text-align: left;
}
.title a{
  color: #333;
  font-weight: normal;
}
</style>

